<template>
  <div>
    <div
      class="co-page-banner-section section"
      data-page-title="Contact Us"
      style="background-image: url(img/page-banner-bg.jpg)"
    >
      <div class="container-fluid">
        <div class="row">
          <div class="co-page-banner text-center col-xs-12">
            <h1>联系我们</h1>
          </div>
        </div>
      </div>
    </div>

    <div class="container" style="display: flex; flex-direction: row;width: 100%; padding-top: 70px;    height: 649px;">
     
      <div
        style="width: 400px"
        class="co-contact-info col-lg-3 col-md-4 col-sm-5 cl-xs-12 mb-40"
      >
        <ul>
          <li><span>地址 :</span> 上海浦东新区秀浦路68号2号楼</li>
          <li><span>邮箱 :</span> <a href="#">yaxinchao@sailvoice.com</a></li>
          <li><span>电话 :</span> <a href="#">15039371526 晁女士</a></li>
        </ul>
      </div>
      <div style="width: 100%; height: 100%">
        <baidu-map
          class="bm-view"
          ak="0GZiHO9KMXnqaZHE4vf4kqxtSqgb6TP8"
          :center="center"
          :zoom="15"
          :scroll-wheel-zoom="true"
          :icon="{size: {width: 200, height: 200}}"
        >
          <bm-marker :position="center">
            <bm-info-window
              title="上海浦东新区秀浦路68号2号楼"
              :position="center"
              :show="true"
            >
            </bm-info-window>
          </bm-marker>
          <bm-marker
            position="{lng:121.54805720908693,lat: 31.128468821278858}"
            :dragging="true"
            animation="BMAP_ANIMATION_BOUNCE"
          ></bm-marker>
        </baidu-map>
      </div>
    </div>
  </div>
</template>

<script>
import BaiduMap from "vue-baidu-map/components/map/Map.vue";
import bmMarker from "vue-baidu-map/components/overlays/Marker";
import bmLabel from "vue-baidu-map/components/overlays/Label";
import bmInfoWindow from "vue-baidu-map/components/overlays/InfoWindow";
export default {
  name: "contact",
  data() {
    return {
      center: { lng: 121.54805720908693, lat: 31.128468821278858 },
    };
  },
  // 注册组件
  components: { BaiduMap, bmMarker, bmLabel, bmInfoWindow },
  methods: {
    initMap() {
      const map = new BMap.Map("map"); // 创建Map实例
      const point = new BMap.Point(116.404, 39.915); // 创建点坐标
      map.centerAndZoom(point, 15); // 初始化地图,设置中心点坐标和地图级别
    },
  },
  mounted() {
    debugger;
    this.initMap();
  },
  created() {
    // 监听
  },
  beforeUpdate() {},
  // 挂载前状态(里面是操作)
  beforeMount() {},
};
</script>
<style  lang="scss">
.bm-view {
  width: 100%;
  height: 100%;
}
</style>





